/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/04/25
 *@description  options  component 下拉参数组件
 */
/**
 * #item
 *
 * @type        aty-option
 * @cn            下拉条目
 * @nameprop   label
 * @stPlugin    false
 * @stContainer false
 * @parents     [aty-select,aty-option-group]
 * @children    [aty-text,aty-panel,aty-image]
 */
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [default]
 * @type    list
 * @description  default插槽
 */
import config from '../../../../config/config.js'

// mixins
import Emitter from '../../../../mixins/emitter.js'
// prefix
const prefixCls = config.prefix + '-select-item'
// module
export default {
  name: config.prefix + '-option',
  componentName: prefixCls,
  mixins: [Emitter],
  props: {
    /**
     * #property
     *
     * @name    value
     * @cn      value值
     * @group   基本属性
     * @type    string,number,object
     * @required true
     * @description  当前option的value值
     */
    value: {
      type: [String, Number, Object],
      required: true
    },
    /**
     * #property
     *
     * @name    label
     * @cn      标签名称
     * @group   标签
     * @type    string,number
     * @description  当前option的标签名称
     */
    label: {
      type: [String, Number]
    },
    /**
     * #property
     *
     * @name    simpleSpell
     * @cn      简拼
     * @group   标签
     * @type    string
     * @description  当前option的简拼
     */
    simpleSpell: {
      type: String
    },
    /**
     * #property
     *
     * @name    fullSpell
     * @cn      全拼
     * @group   标签
     * @type    string
     * @description  当前option的全拼
     */
    fullSpell: {
      type: String
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @group   控制
     * @type    boolean
     * @value  false
     * @description  当前option是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    showTitle
     * @cn      是否显示title
     * @group   控制
     * @type    boolean
     * @value   false
     * @description 鼠标滑过是否显示title
     */
    showTitle: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    valid
     * @cn      有效
     * @group   控制
     * @type    number
     * @value   1
     * @description 有效, 此属性给单值代码使用, 设置为非1, 则下拉里始终不显示
     */
    valid: {
      type: Number,
      default: 1
    },
    /**
     * #property
     *
     * @name    showInvalid
     * @cn      显示无效节点
     * @group   控制
     * @type    boolean
     * @value   false
     * @description 设置为true后, 无效的代码值会以disable的形式展现
     */
    showInvalid: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    htmlHighLight
     * @cn      显示html高亮，用于v-html渲染
     * @group   控制
     * @type    boolean
     * @value   true
     * @bind    must
     * @description 设置为false后, 不会采用v-html渲染，会减少一层dom
     */
    htmlHighLight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selected: false,
      index: 0, // for up and down to focus
      isFocus: false,
      hidden: this.valid !== 1 && !this.showInvalid, // for search
      searchLabel: '' // the value is slot,only for search
    }
  },
  computed: {
    isDisabled() {
      return this.disabled || this.valid !== 1
    },
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-disabled`]: this.isDisabled,
          [`${prefixCls}-selected`]: this.selected,
          [`${prefixCls}-focus`]: this.isFocus
        }
      ]
    },
    showLabel() {
      return (this.label) ? this.label : this.value
    },
    // 获取title
    getTitle() {
      const title = this.showTitle ? this.showLabel : ''
      return Artery.delHTMLTag(String(title))
    }
  },
  methods: {
    select() {
      if (this.isDisabled) {
        return false
      }
      // 选中
      this.dispatch(config.prefix + '-select', 'select-selected', this.value)
      this.dispatch(config.prefix + '-auto-complete', 'select-selected', this.value)
    },
    blur() {
      this.isFocus = false
    },
    queryChange(val) {
      if (this.valid !== 1 && !this.showInvalid) {
        return
      }
      // 优先转义，对于特殊字符都增加转移符  “\”
      const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1')
      // 设置其显示或者隐藏的状态
      this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel) && !this.pinyinMatch(parsedQuery)
    },
    updateSearchLabel() {
      this.searchLabel = this.$el.textContent
    },
    onSelectClose() {
      this.isFocus = false
    },
    onQueryChange(val) {
      this.queryChange(val)
    },
    // 判断拼音简拼或全拼是否匹配
    pinyinMatch(queryText) {
      if (this.pinyinSearch) {
        if (this.simpleSpell && this.simpleSpell.toLowerCase().indexOf(queryText.toLowerCase()) > -1) {
          return true
        }
        if (this.fullSpell && this.fullSpell.toLowerCase().indexOf(queryText.toLowerCase()) > -1) {
          return true
        }
      }
      return false
    }
  },
  mounted() {
    this.updateSearchLabel()
    // 添加
    this.dispatch(config.prefix + '-select', 'append')
    this.$on('select-close', this.onSelectClose)
    this.$on('query-change', this.onQueryChange)

    const select = Artery.findComponentUpward(this, config.prefix + '-select')
    if (select) {
      this.pinyinSearch = select.pinyinSearch
      // select.hasChild = true // 目前没人用
    }
  },
  beforeDestroy() {
    // 移除
    this.dispatch(config.prefix + '-select', 'remove')
    this.$off('select-close', this.onSelectClose)
    this.$off('query-change', this.onQueryChange)
  }
}
